<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称：{{ item.title }}
                </b>
                ———————
                <b>
                    价格：{{ item.price }}
                </b>
                ———————
                <b>
                    库存：{{ item.inventory }}
                </b>
                <button @click="addCart(item)" :disabled="item.inventory===0">加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>

<script>
//需求：
// 1.请求服务器，在product组件里面渲染数据
// 封装请求的方法
// 请求放到vuex的action里面
// vuex需要模块化，并且添加mutation

// 2.点击产品后面的按钮，需要将产品添加到购物车

// 3.相同的数据添加到购物车之后，需要让购物车的数量+1 产品的库存数量-1

// 4.总价计算

import { mapActions, mapState } from 'vuex';
export default {
    methods: {
        addCart(current) {
            //current 表示点击按钮选中的这条数据
            console.log(current);
            this.ADD_CART(current)
        },
        ...mapActions('product', ['FETCH_PRODUCT']),
        ...mapActions('cart', ['ADD_CART'])
    },
    computed: {
        ...mapState('product', ['productData'])
    },
    mounted() {
        this.FETCH_PRODUCT()
    },

}




</script>